<!--
 * @Author: zhou5228 10892268+zhou5228@user.noreply.gitee.com
 * @Date: 2022-11-11 19:05:44
 * @LastEditors: zhou5228 10892268+zhou5228@user.noreply.gitee.com
 * @LastEditTime: 2022-12-06 16:07:23
 * @FilePath: \project-name\src\components\Leftsidebar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="leftS">
        <div id="user">
            <div>
                <img src="../assets/img/user.jpeg" alt="">
                <span>{{ name }}</span>
            </div>
        </div>
        <div id="main">
            <ul>
                <li>
                    <p :class="$route.params.title == 'home' ? 'hover' : ''">首页</p>
                    <ul class="tongzhi">
                        <li @click="$router.push('/index/home/')"
                            :class="$route.path == '/index/home/home' ? 'active' : ''">
                            <span>公告通知</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <p :class="$route.params.title == 'content' ? 'hover' : ''">疫情防控</p>
                    <ul class="yiqing">
                        <li @click="pathC()"
                            :class="$route.path == '/index/content/clocking' ? 'active' : ''"><span>每日健康打卡</span></li>
                        <li @click="pathG()"
                            :class="$route.path == '/index/content/gocome' ? 'active' : ''"><span>出入行程报备</span></li>
                        <li @click="$router.push('/index/content/visit')"
                            :class="$route.path == '/index/content/visit' ? 'active' : ''"><span>来访人员报备</span></li>
                    </ul>
                </li>
                <li>
                    <p :class="$route.params.title == 'user' ? 'hover' : ''">个人中心</p>
                    <ul class="geren">
                        <li @click="pathU()" :class="$route.path == '/index/user/userinfo' ? 'active' : ''">
                            <span>个人信息管理</span></li>
                        <li @click="$router.push('/index/user/recordc')"
                            :class="$route.path == '/index/user/recordc' ? 'active' : ''"><span>每日打卡记录</span></li>
                        <li @click="$router.push('/index/user/recordg')"
                            :class="$route.path == '/index/user/recordg' ? 'active' : ''"><span>出入报备记录</span></li>
                        <li @click="$router.push('/index/user/recordv')"
                            :class="$route.path == '/index/user/recordv' ? 'active' : ''"><span>来访报备记录</span></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="tuichu">
            <button @click="$router.push('/login')">退出</button>
        </div>
    </div>
</template>

<script>
export default {
    name: "leftsidebar",
    data() {
        return {
            name: '',
            getinfo: []
        }
    },
    created() {
        this.getinfo = JSON.parse(this.$route.query.getinfo ? this.$route.query.getinfo : '[]');
        this.name = this.getinfo.name;
    },
    methods: {
        pathU() {
            this.$router.push({
                path: '/index/user/userinfo',
                query: {
                    userinfo: JSON.stringify(this.getinfo)
                }
            })
        },
        pathC(){
            this.$router.push({
                path: '/index/content/clocking',
                query: {
                    Clist: JSON.stringify(this.getinfo)
                }
            })
        },
        pathG(){
            this.$router.push({
                path: '/index/content/gocome',
                query: {
                    Glist: JSON.stringify(this.getinfo)
                }
            })
        }
    }
}
</script>

<style scoped>
.leftS {
    min-height: 100vh;
    background: #6699CC;
    background-repeat: no-repeat;
    color: azure;
    display: flex;
    flex-direction: column;
}

.leftS #user {
    margin: 15px 10px 30px 10px;
}

.leftS #main {
    flex: 1;
}

.leftS #tuichu {
    height: 90px;
}


.leftS ul {
    margin: 0;
}

.leftS ul li {
    margin: 10px 0;
    list-style: none;
    cursor: pointer;
}


.leftS #user img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 2px solid var(--black);
    object-fit: cover;
    vertical-align: middle;
    margin-right: 10px;
}

.leftS .active {
    color: #6666CC;
    font-weight: bold;
}

.leftS .hover {
    color: #6666CC;
    background-color: #99CCFF;
    background-repeat: no-repeat;
}

.leftS li p {
    font-size: 20px;
    font-weight: bold;
}


.leftS li .tongzhi,
.leftS li .yiqing,
.leftS li .geren {
    font-size: 14px;
    margin-bottom: 30px;
}

.leftS #tuichu button {
    width: 60px;
    height: 60px;
    color: #666633;
    background-color: #CCFF99;
    border: 1px solid #CCFF99;
    border-radius: 100%;
    font-family: "黑体";
    font-size: 15px;
}

.leftS #tuichu button:active {
    background-color: green;
}
</style>